<template>
  <div>
    {{title}} <br></br>
    <!--<a href="javascript:" v-on:click="get()">GET按钮</a>-->
    <b-button v-on:click="separate_get()">GET传值</b-button>
    <a href="javascript:" v-on:click="post()">POST按钮</a>
    <b-button variant = "primary" v-on:click="separate_post()">POST传值</b-button> <br></br>
    {{msg}}

    <!--<label type="button" class="btn btn-default">-->
        <!--上传图片<input hidden type="file" class="btn btn-default">-->
    <!--</label>-->
    <form action="" method="post" enctype="multipart/form-data">
      <input type="text" name="title">
      <input type="text" name="content">
      <input type="file" name="myfile">
      <input type="submit" value="提交" v-on:click="post()">
    </form>
  </div>
</template>

<script>
  import axios from 'axios'
  // 1、使用qs将axios发送的数据格式转换为form-data格式（在安装axios时，默认就安装了）
  import qs from 'qs'
  import {getMessage} from './api.js'
  import {addMessage} from './api.js'
  export default {
    name: "Test",

    data () {
      return {
        title: '我是Test组件！！！',
        msg:'',
        // getImgUrl: 'http://192.166.0.132:9999/txapi/storage/?roomid=1',
        param_get: {
          roomid: '1'
        },

        param_post: {
          roomid: '6',
          content: 'wocalei',
          img:''

        },

        ceshi:{
          title: 'zxccvxzvxxcv',
          content: 'fgoidgkbjkfdgdf',
          myfile: '',
        }

      }
    },

    methods: {
      get: function() {
        axios.get("http://192.168.0.144:9999/txapi/storage/", {
          params: this.param_get
        }).then(res => {
          this.msg = res.data
        })
          .catch((error) => {
            this.msg = error
          })
      },

      separate_get() {
        getMessage(this.param_get).then((res) => {
          this.msg = res.data
        })
          .catch((error) => {
            this.msg = error
          })
      },

      post: function() {
        axios.post(
          "http://192.168.0.145:9999/one/index/",
          // 2、将请求数据转换为form-data格式
          qs.stringify(this.ceshi),
          // 3、设置请求头Content-Type
          { headers:{'Content-Type':'application/x-www-form-urlencoded'} },
        ).then(res => {
          this.msg = res.data
        })
          .catch((error) => {
            this.msg = error
          })
      },

      separate_post() {
        addMessage(this.param_post).then((data) => {
          this.msg = data.data
        })
          .catch((error) => {
            this.msg = error
          })
      },


    }

  }

</script>

<style scoped>

</style>
